import { blue, green, red } from "@ant-design/colors";
import {
  CheckCircleFilled,
  ClockCircleFilled,
  CloseCircleFilled,
} from "@ant-design/icons";
import React, { useMemo } from "react";
import type { ProgressProps } from "./Progress";
import Progress from "./Progress";
import type { Status, StatusInfo } from "./types";

// 内置 status 映射
const statusMap: Record<string, StatusInfo> = {
  wait: {
    icon: () => <ClockCircleFilled style={{ color: "rgba(0, 0, 0, 0.2)" }} />,
    color: "rgba(0, 0, 0, 0.2)",
  },
  process: {
    icon: (props: ProgressProps) => <Progress {...props} />,
    color: blue[5],
  },
  success: {
    icon: () => <CheckCircleFilled style={{ color: green[5] }} />,
    color: green[5],
  },
  error: {
    icon: () =>
      (<CloseCircleFilled style={{ color: red[5] }} />) as React.ReactNode,
    color: red[5],
  },
};

function mapStatus(status: Status) {
  if (isStatusBuiltIn(status)) {
    // @ts-ignore
    return statusMap[status];
  }
  return { icon: () => status };
}

interface StatusIconProps {
  prefixCls?: string;
  className?: string;
  status: Status;
  percent?: number;
}

export function StatusIcon({
  prefixCls,
  className,
  status,
  percent,
}: StatusIconProps) {
  const statusInfo = useMemo(() => mapStatus(status), [status]);
  const icon = statusInfo.icon({ prefixCls, percent });
  return <div className={className}>{icon}</div>;
}

export function isStatusBuiltIn(status: Status) {
  if (typeof status === "string") {
    return !!statusMap[status];
  }
  return false;
}
